<template>
  <div v-for="item in dataList" :key="item.index" class="data-under">
    <el-card class="box-card mt-10">
      <template #header>
        <div class="card-header">
          <span>{{item.index}}</span>
        </div>
      </template>
      <div class="under-item flex" v-if="item.length !== 0">
        <li :class="data.online===true?'active':''" class="item mt-10 flex fdc aic" v-for=" data in item" :key="data.id">
          <i class="icon iconfont icon-yalichuanganqi f999"></i>
          <p>{{data.devValue}}</p>
          <p>{{data.devName}}</p>
        <p>eui:{{data.eui}}</p>
        </li>
        <li class="fix item" ></li>
        <li class="fix item" ></li>
        <li class="fix item" ></li> 
        <li class="fix item" ></li> 
        <li class="fix item" ></li> 
      </div>
      <div v-else class="under-item">
        <strong>暂无数据</strong>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import * as api from "../../../api/index";
import { ref, onMounted } from "vue";
const dataList = ref({});
const getDataList = () => {
  api.$deviceSensorList().then((res) => {
    dataList.value = res.data;
    console.log(res.data);
  });
};
onMounted(getDataList);
</script>
